<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home/list' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>发布文章</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 表单 -->
    <el-form :model="form" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <!-- quill-editor 当成 textarea 一样使用 -->
        <quill-editor v-model="form.content"></quill-editor>
      </el-form-item>
      <el-form-item label="栏目">
        <!-- v-model 收集数据的值 数组 -->
        <el-checkbox-group v-model="form.categories">
          <!-- 标签中间的内容 1 2 3 展示给用户看的 -->
          <!-- label 是收集的具体值 -->
          <el-checkbox :label="tab.id" v-for="tab in tablist" :key="tab.id">{{
            tab.name
          }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="封面">
        <!-- el-upload 功能是很强大的 可以直接上传 ajax   -->
        <!-- 
          :action="$axios.defaults.baseURL + '/upload'"   接口
          :headers="headers"    请求头
          list-type="picture-card"  图片墙
         -->
        <el-upload
          :action="$axios.defaults.baseURL + '/upload'"
          :headers="headers"
          list-type="picture-card"
          :on-success="onSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group v-model="form.type">
          <el-radio label="1">文章</el-radio>
          <el-radio label="2">视频</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="publish" type="primary">发布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: '', // 标题
        content: '', // 内容
        categories: [], // 栏目
        type: '1', // 类型
        cover: [], // 封面
      },
      tablist: [], // 所有的栏目项
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    }
  },
  async created() {
    // 获取栏目
    let res = await this.$axios.get('/category')
    console.log('栏目', res.data.data)
    this.tablist = res.data.data
    this.tablist = this.tablist.filter(v => {
      // 条件
      // return true => 把 v 元素 返回
      // return false => 把 v 元素 不返回
      // 热点
      // 头条
      return v.name !== '关注' && v.name !== '头条'
    })
  },
  methods: {
    // 文件上传的钩子
    onSuccess(res) {
      console.log('文件上传成功', res.data)
      // this.form.cover.push(res.data.url)
      this.form.cover.push({
        id: res.data.id,
        url: res.data.url,
      })
    },
    // 点击发布
    async publish() {
      // 1. 处理 categories
      // forEach , filter , map(映射 一对一 ), find , some 和 every
      // [1,2]  => [{id:1}, {id:2}]
      this.form.categories = this.form.categories.map(v => {
        // 1 2
        return { id: v }
      })

      // 3. 处理视频
      if (this.form.type == 2) {
        console.log(this.form.content)
        const reg = /<\/?.+?\/?>/g
        this.form.content = this.form.content.replace(reg, '')
        console.log(this.form.content)
      }

      // 2. 发布文章
      let res = await this.$axios.post('/post', this.form)
      console.log('发布文章', res.data)

      //4. 提示
      this.$message.success(res.data.message)

      //5. 跳转到list页面
      this.$router.push('/home/list')
    },
  },
}
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin: 20px 0;
}

.quill-editor {
  background: #fff;

  /deep/ .ql-container {
    height: 100px;
  }
}
</style>
